<template>
  <view class="p-5rpx" style="background-color: #f5f5f9">
    <u-row gutter="5rpx">
      <u-col span="4" v-for="(item, index) in topData" :key="index">
        <view
          class="rounded-md text-white p-15rpx text-base font-bold"
          :style="{
            background: item.color,
          }"
        >
          <view class="title flex items-center mb-18rpx">
            <u-icon :name="item.icon" color="white" size="11rpx"></u-icon>
            <text class="ml-5rpx">{{ item.title }}</text>
          </view>
          <view class="flex">
            <view class="flex flex-col flex-1" v-for="(i, idx) in item.data" :key="idx">
              <text class="text-xl">{{ formatMoney(i.value, true) }}</text>
              <text class="text-white block mt-5rpx" style="font-size: 8rpx; opacity: 0.8; font-weight: normal">{{
                i.name
              }}</text>
            </view>
          </view>
        </view>
      </u-col>
    </u-row>

    <view class="h-5rpx"><!--  间隔  --></view>

    <u-row gutter="5rpx">
      <u-col span="8">
        <view class="bg-white mb-3 h-220rpx">
          <u-cell title-style="font-weight: bold" class="h-30rpx" :border="false">
            <template #title>
              <view class="flex items-center">
                <u-icon name="file-text" color="#3092ff" bold></u-icon>
                <text class="ml-5rpx font-bold" style="color: #3092ff">订单趋势</text>
              </view>
            </template>
            <template #value>
              <view class="mt-3 shadow-md">
                <u-subsection
                  :list="orderChart.tablist"
                  key-name="title"
                  :current="orderChart.curNow"
                  mode="subsection"
                  inactive-color="#3092ff"
                  bold
                ></u-subsection>
              </view>
            </template>
          </u-cell>
          <view class="p-3">
            <view style="height: 170rpx">
              <qiun-data-charts canvas2d type="area" :opts="orderChart.ops" :chartData="orderChart.chartData" />
            </view>
          </view>
        </view>
      </u-col>
      <u-col span="4">
        <view class="bg-white mb-3 h-220rpx">
          <u-cell title-style="font-weight: bold" class="h-30rpx" :border="false">
            <template #title>
              <view class="flex items-center">
                <u-icon name="file-text" color="#3092ff" bold></u-icon>
                <text class="ml-5rpx font-bold" style="color: #3092ff">支付占比</text>
              </view>
            </template>
            <template #value>
              <view class="mt-3 shadow-md">
                <u-subsection
                  :list="payRing.tablist"
                  key-name="title"
                  :current="payRing.curNow"
                  mode="subsection"
                  inactive-color="#3092ff"
                  bold
                ></u-subsection>
              </view>
            </template>
          </u-cell>
          <view class="p-3">
            <view style="height: 170rpx">
              <qiun-data-charts canvas2d type="ring" :opts="payRing.ops" :chartData="payRing.chartData" />
            </view>
          </view>
        </view>
      </u-col>
    </u-row>

    <u-row gutter="5rpx">
      <u-col span="8">
        <view class="bg-white mb-3 h-220rpx">
          <u-cell title-style="font-weight: bold" class="h-30rpx" :border="false">
            <template #title>
              <view class="flex items-center">
                <u-icon name="file-text" color="#3092ff" bold></u-icon>
                <text class="ml-5rpx font-bold" style="color: #3092ff">收入趋势(万元)</text>
              </view>
            </template>
            <template #value>
              <view class="mt-3 shadow-md">
                <u-subsection
                  :list="incomeChart.tablist"
                  key-name="title"
                  :current="incomeChart.curNow"
                  mode="subsection"
                  inactive-color="#3092ff"
                  bold
                ></u-subsection>
              </view>
            </template>
          </u-cell>
          <view class="p-3">
            <view style="height: 170rpx">
              <qiun-data-charts canvas2d type="column" :opts="incomeChart.opts" :chartData="incomeChart.chartData" />
            </view>
          </view>
        </view>
      </u-col>
      <u-col span="4">
        <view class="bg-white mb-3 h-220rpx">
          <u-cell title-style="font-weight: bold" class="h-30rpx" :border="false">
            <template #title>
              <view class="flex items-center">
                <u-icon name="file-text" color="#3092ff" bold></u-icon>
                <text class="ml-5rpx font-bold" style="color: #3092ff">顾客类型占比</text>
              </view>
            </template>
            <template #value>
              <view class="mt-3 shadow-md">
                <u-subsection
                  :list="customerRing.tablist"
                  key-name="title"
                  :current="customerRing.curNow"
                  mode="subsection"
                  inactive-color="#3092ff"
                  bold
                ></u-subsection>
              </view>
            </template>
          </u-cell>
          <view class="p-3">
            <view style="height: 170rpx">
              <qiun-data-charts canvas2d type="pie" :opts="customerRing.opts" :chartData="customerRing.chartData" />
            </view>
          </view>
        </view>
      </u-col>
    </u-row>

    <u-toast ref="refuToast" />
  </view>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import orderChartBlock from "./data-statistics-block/orderChart";
import payRingChart from "./data-statistics-block/payRingChart";
import incomeChartBlock from "./data-statistics-block/incomeChart";
import customerRingChartBlock from "./data-statistics-block/customerRingChart";
import { formatMoney } from "@/utils/util";

const topData = [
  {
    title: "今日数据",
    color: "#3092ff",
    icon: "file-text",
    data: [
      {
        name: "今日收入(元)",
        value: "4152",
      },
      {
        name: "今日订单",
        value: "1249",
      },
    ],
  },
  {
    title: "本周数据",
    color: "#ffa325",
    icon: "file-text",
    data: [
      {
        name: "本周收入(元)",
        value: "73102",
      },
      {
        name: "本周订单",
        value: "6249",
      },
    ],
  },
  {
    title: "本月数据",
    color: "#1bcd66",
    icon: "file-text",
    data: [
      {
        name: "本月收入(元)",
        value: "894152",
      },
      {
        name: "本月订单",
        value: "321249",
      },
    ],
  },
];

// 订单趋势
const orderChart = orderChartBlock.Chart;

// 支付占比
const payRing = payRingChart.Chart;

// 收入趋势
const incomeChart = incomeChartBlock.Chart;

// 顾客类型占比
const customerRing = customerRingChartBlock.Chart;

const refuToast = ref(null);
onMounted(() => {
  orderChartBlock.getChartData();

  payRingChart.getChartData();

  incomeChartBlock.getChartData();

  customerRingChartBlock.getChartData();

  refuToast.value.show({
    type: "error",
    title: "失败",
    message: "暂无数据",
    icon: "info-circle-fill",
  });
});
</script>
